<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器原生js 配合element css</title>
    <script src="//unpkg.com/lodash@4.17.11/lodash.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
</head>
<body>
<div id="vApp">
    <!--组织架构表-->
    <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition"
         style="width: 100%;">
        <div class="hidden-columns">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="el-table__header-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                <colgroup>
                    <col name="el-table_1_column_1" width="50">
                    <col name="el-table_1_column_2" width="227">
                    <col name="el-table_1_column_3" width="227">
                    <col name="el-table_1_column_4" width="227">
                </colgroup>
                <thead class="has-gutter">
                <tr class="">
                    <th colspan="1" rowspan="1" class="el-table_1_column_1     is-leaf">
                        <div class="cell">#</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_2     is-leaf">
                        <div class="cell">名称（姓名）</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_3     is-leaf">
                        <div class="cell">身份证号码</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_4     is-leaf">
                        <div class="cell">职务</div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                <colgroup>
                    <col name="el-table_1_column_1" width="50">
                    <col name="el-table_1_column_2" width="227">
                    <col name="el-table_1_column_3" width="227">
                    <col name="el-table_1_column_4" width="227">
                </colgroup>
                <tbody>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>1</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">执行董事</div>
                    </td>
                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>2</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">经理</div>
                    </td>
                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>3</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell"></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">监事</div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


    <!--股东表-->
    <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition"
         style="">
        <div class="hidden-columns">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="el-table__header-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                <colgroup>
                    <col name="el-table_1_column_1" width="50">
                    <col name="el-table_1_column_2" width="184">
                    <col name="el-table_1_column_3" width="181">
                    <col name="el-table_1_column_4" width="181">
                    <col name="el-table_1_column_5" width="181">
                </colgroup>
                <thead class="has-gutter">
                <tr class="">
                    <th colspan="1" rowspan="1" class="el-table_1_column_1     is-leaf">
                        <div class="cell">#</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_2     is-leaf">
                        <div class="cell">股东姓名</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_3     is-leaf">
                        <div class="cell">股东身份证号码</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_4     is-leaf">
                        <div class="cell">出资额（万元）</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_1_column_5     is-leaf">
                        <div class="cell">持股比例</div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                <colgroup>
                    <col name="el-table_1_column_1" width="50">
                    <col name="el-table_1_column_2" width="184">
                    <col name="el-table_1_column_3" width="181">
                    <col name="el-table_1_column_4" width="181">
                    <col name="el-table_1_column_5" width="181">
                </colgroup>
                <tbody>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>1</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">罗正安</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">5213521378123612</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">12</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            10%
                        </div>
                    </td>

                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>2</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">李燕</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">123y789131y789y7</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">118</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            90%
                        </div>
                    </td>

                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>3</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">李少宾</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">7892398179289</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">ew</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            332343242%
                        </div>
                    </td>

                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>4</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">7908</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">当前撒</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">阿萨德</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            as%
                        </div>
                    </td>

                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>5</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">7908</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">当前撒</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">阿萨德</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            as%
                        </div>
                    </td>

                </tr>
                <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                        <div class="cell">
                            <div>6</div>
                        </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                        <div class="cell">7908</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                        <div class="cell">当前撒</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_4  ">
                        <div class="cell">阿萨德</div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_1_column_5  ">
                        <div class="cell">
                            as%
                        </div>
                    </td>

                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
<script>
    var obj1 = {
        name: 'jiankian',
        age: 23,
        love: 'J',
    }
    var obj2 = {
        name: '罗正安',
        refund: 10000,
    }
    var obj3 = {
        model: 'MacBook Pro 15 middle'
    };
    // var obj4 = Object.assign(obj1,obj2);
    // obj4 = Object.assign(obj1,obj3);
    // console.log('obj4')
    // console.log(obj4)
    // console.log('obj1')
    // console.log(obj1)
    var objG = _.assign(obj1, obj2, obj3);
    console.log('objG');
    console.log(objG);
    console.log('obj1');
    console.log(obj1);
    console.log('obj2');
    console.log(obj2);
    console.log('obj3');
    console.log(obj3);
</script>
</body>
</html>
